	
	@keyframes birth{
		from{opacity: 0;}
		to{opacity:1;}
	}
	
	@keyframes DoneName {
		0% {
			border: orange solid 0px;
			background: #808080;
		}
	
		100% {
			border: orange solid 1px;
			background: #FFA500;
		}
	}
	
	@keyframes onclickname {
		0% {
			width: 0%;
			
		}
	
		100% {
			width: 35%;
		}
	}
	
			html,
			body {
				height: 100%;
				weight:100%;
				padding: 0%;
				margin: 0%;
			}

			.bg {
				width: 100%;
				height: 100%;
				padding: 0%;
				margin: 0%;
				background-color: gray;
			}

			#name {
				width: 25%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				border: none;
				background: #808080;
				border-bottom: solid white 2px;
				text-align: center;
				animation: onclickname 5s;
				-moz-animation: onclickname 5s;
				-webkit-animation: onclickname 5s;
				-o-animation: onclick 5s;
				color: #FFFFFF;
			}

			.button,.show {
				width: 15%;
				position: absolute;
				left: 50%;
				top: 55%;
				transform: translate(-50%, -53%);
				border: none;
				background: #808080;
				color: #FFFFFF;
				font-weight: 400;
				animation: DoneName 5s;
				border: orange solid 1px;
				background: #FFA500;
			}
			
.Year{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background: #808080;
	color: #FFFFFF;
	text-align: center;
	border: none;
	border-bottom:solid #FFFFFF 2px;
	animation birth 2s; 
	-moz-animation: birth 2s;
	-webkit-animation: birth 2s;
	-moz-animation: birth 2s;
	}
.Month{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background: #808080;
	color: #FFFFFF;
	text-align: center;
	border: none;
	border-bottom:solid #FFFFFF 2px;
	animation birth 2s; 
	-moz-animation: birth 2s;
	-webkit-animation: birth 2s;
	-moz-animation: birth 2s;
}
.Day{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background: #808080;
	color: #FFFFFF;
	text-align: center;
	border: none;
	border-bottom:solid #FFFFFF 2px ;
	animation birth 2s; 
	-moz-animation: birth 2s;
	-webkit-animation: birth 2s;
	-moz-animation: birth 2s;
}
#year{
	position: absolute;
	width: 25%;
	top:45%;
	left: 50%;
	transform: translate(-50%,-45%);
	color: #FFFFFF;
	background: #808080
	font-family: "微软雅黑 Light";
	background: #808080;
	border: none;
	border-bottom:solid #FFFFFF 2px;
	text-align: center;
}
#month{
	position: absolute;
	width: 25%;
	text-align: center;
	top:55%;
	left: 50%;
	transform: translate(-50%,-55%);
	color: #FFFFFF;
	background: #808080;
	font-family: "微软雅黑 Light";
	border: none;
	border-bottom:solid #FFFFFF 2px;
}
#day{
	position: absolute;
	top:65%;
	text-align: center;
	width: 25%;
	left: 50%;
	transform: translate(-50%,-65%);
	color: #FFFFFF;
	background: #808080;
	font-family: "微软雅黑 Light";
		border: none;
	border-bottom:solid #FFFFFF 2px;
}
.Done{
	position: absolute;
	top:70%;
	left: 50%;
	transform: translate(-50%,-10%);
	border: none;
	border:solid #FFFFFF 2px;
	background: #808080;
	color: #FFFFFF;
}
#a{
	position: absolute;
	top:35%;
	left: 50%;
	transform: translate(-50%,-35%);
	color: #FFFFFF;
	font-family: "微软雅黑 Light";
	font-size: 24px;
}
#ago{
	position: absolute;
	top: 35%;
	left: 50%;
	transform: translate(-50%,-35%);
	color: #FFFFFF;
	font-family: "微软雅黑 Light";
	font-size: 24px;
}
#oldago{
	position: absolute;
	top: 35%;
	left: 50%;
	transform: translate(-50%,-35%);
	color: #FFFFFF;
	font-family: "微软雅黑 Light";
	font-size: 24px;
}